
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/w3.css">
<script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="./js/table.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/validator/10.11.0/validator.min.js"></script>
<style>
html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>
<script>
initialize('hqD9IMTNsFSk2LxbiFnBEvCp-gzGzoHsz','ITs4Ni1EiEI5sEcQQ4CBJqpb');
const GROUPS="groups";
const GROUPMEMBERS="groupmembers";
const GROUPMSG="groupmsg";
const MEMBERMSG="membermsg";
var g_groups={};

//if(!currentUser())
//{
//   window.location.href="login.html";
//}
//else

{
	var onCreateSuccess = function(tablename, tobj)
	{
	console.log("New object created on " + tablename + " with objectId: " + tobj.id );
    if(tablename === GROUPMEMBERS)
    {
       //create a msg for user to confirm;
    }

	}

	var onError = function(tablename, tobj, error)
	{
	console.error("Failed to create " + tablename + " with data:" + tobj +  " with error message: " + error.message);
	}
    
	var onQueryResult=function(tablename, results)
	{
	   console.log(tablename);
	   console.log(results);
       if(tablename === GROUPS)
            {
          
            showAllGroupsInHeader(results);
            //findItemsEqualTo(GROUPMEMBERS, "mid", currentUser().id, onQueryResult);
            findItemsEqualTo(GROUPMEMBERS, "mphone","18939895003", onQueryResult);
            }
       else if(tablename === GROUPMEMBERS)
            {
            showAllMemberCards(results);
            }
        
	}
	console.log(AV.User.current());
	findItemsEqualTo(GROUPS, "ownerid", currentUser().id, onQueryResult);
    
	var rid = createTableItem(GROUPS, {"ownerid":currentUser().id, "grpname":"group3", "grpaddr":"shanghai", "phone":"18939895003"}, onCreateSuccess, onError);
	console.log(getRequestData(rid));
	var rid2 = createTableItem(GROUPS, {"ownerid":currentUser().id, "grpname":"group4", "grpaddr":"shanghai", "phone":"18018661248"}, onCreateSuccess, onError);
	console.log(getRequestData(rid2));
    

    
}
function addMemberToGroup(mphone, memail, jifen,grpid, onSuccess, onError)
{
return createTableItem(GROUPMEMBERS, {"grpid":grpid, "mphone":mphone, "memail":memail,"jifen":jifen,"mid":""},onSuccess, onError);
}

function createGroupUI()
{
//show a form ui.
document.getElementById('id01').style.display='block';
}
function addNewGroup(name, addr, phone,onSuccess, onError)
{
   return createTableItem(GROUPS, {"ownerid":currentUser().id, "grpname":name, "grpaddr":addr, "phone":phone}, onCreateSuccess, onError);
}
function onManageGroup(grpid)
{
console.log(grpid);

//addMemberToGroup("18939895003", "sdf@123.com", 100, grpid, onCreateSuccess, onError);
 findItemsEqualTo(GROUPMEMBERS, "grpid", grpid, onQueryResult);
}
function createGroup(name, address,phone)
{

}
function showAllMemberCards(results)
{
	if(results.length == 0)
	{
	   	var dd = ele("mycards");
		var html ="";
        html += '<div class="w3-container w3-card w3-round w3-margin">';
        html += '<h1>您还没有任何会员卡。</h1></div>';        
        dd.innerHTML = html;
	}
	else
	{
    	var dd = ele("mycards");
		var html ="";
        var grp;
		for(var i=0;i<results.length;i++)
		{
        grp = g_groups[results[i].get("grpid")];
        if(!grp)
        {
        console.log("cannot find a group:" + result[i]);
        }
        html += '<div class="w3-container w3-card w3-round w3-margin">'

        html += '<header class="w3-container w3-light-grey"><h3>';
        html += grp.get("grpname");
        html += '</h3></header><div class="w3-container"><p>';
        html += grp.get("grpaddr");
        html += '</p><p>';
        html += grp.get("phone");
        html += '</p><p>会员卡号:';
        html += results[i].id;
        html += '</p><hr></div><button onclick=onCheckMembership("';
        html += results[i].id;
        html += '") class="w3-button w3-block w3-dark-grey">查看</button></div>';
		}
		dd.innerHTML = html;
	}
}
function showAllGroupsInHeader(results)
{
	if(results.length == 0)
	{
	   	var dd = ele("mygroups");
		var html ="";
        html += '<div class="w3-container w3-card w3-round w3-margin">';
        html += '<button onclick=createGroupUI() class="w3-button w3-block w3-green">Create Group</button></div>';        
        dd.innerHTML = html;
	}
	else
	{    
		var dd = ele("mygroups");
		var html ="";
		for(var i=0;i<results.length;i++)
		{
        g_groups[results[i].id]=results[i];
        html += '<div class="w3-container w3-card w3-round w3-margin">'

        html += '<header class="w3-container w3-light-grey"><h3>';
        html += results[i].get("grpname");
        html += '</h3></header><div class="w3-container"><p>';
        html += results[i].get("grpaddr");
        html += '</p><p>';
        html += results[i].get("phone");
        html += '</p><p>新会员请求:<a href="#">';
        html += 2;
        html += '</a></p><hr></div><button onclick=onManageGroup("';
        html += results[i].id;
        html += '") class="w3-button w3-block w3-dark-grey">Manage</button></div>';
		}
		dd.innerHTML = html;
	}
}
function showGroupProfile()
{

}


function clickGroupDropdown() {
  var x = document.getElementById("groupdropdown");
  if (x.className.indexOf("w3-show") == -1) {  
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
function openSideTabs(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("sidetablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " w3-red";
  
}
function openTabs(evt, tabName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("tab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " w3-red";
}
</script>
<body class="w3-theme-l5">
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:300px">

      <div class="w3-center"><br>
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
        <img src="img_avatar4.png" alt="Avatar" style="width:30%" class="w3-circle w3-margin-top">
      </div>

      <form class="w3-container" action="/action_page.php">
        <div class="w3-section">
          <label><b>Group Name</b></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Enter Username" id="groupname" required>
          <label><b>Address</b></label>
          <input class="w3-input w3-border" type="text" placeholder="" name="groupaddr" required>
		  <label><b>Phone</b></label>
          <input class="w3-input w3-border" type="text" placeholder="" id="groupphone" required>
          <button class="w3-button w3-block w3-green w3-section w3-padding" onclick="addGroup()">Add</button>
          
        </div>
      </form>

      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
      </div>

    </div>
  </div>
<!-- Navbar -->
<div class="w3-top">
 <div class="w3-bar w3-theme-d2 w3-left-align w3-large">
  <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large w3-theme-d4"><i class="fa fa-home w3-margin-right"></i>gukedi</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="News">News</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Account Settings">Introduction</a>
  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Messages">Download</a>

  <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" title="My Account">
    My Account
  </a>
 </div>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-large">
  <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">My Profile</a>
</div>

<!-- Page Container -->
<div class="w3-container w3-content" style="max-width:1400px;margin-top:80px">    
  <!-- The Grid -->
  <div class="w3-row">
    <!-- Left Column -->
    <div class="w3-col m3">
      <!-- Profile -->
      <div class="w3-card w3-round w3-white">
        <div class="w3-container">
         <h4 class="w3-center">My Profile</h4>
         <p class="w3-center"><img src="/w3images/avatar3.png" class="w3-circle" style="height:106px;width:106px" alt="Avatar"></p>
         <hr>
         <p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i> Designer, UI</p>
         <p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i> London, UK</p>
         <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> April 1, 1988</p>
        </div>
      </div>
      <br>
      <div class="w3-bar-block w3-card">
  <a href="usermain.html" class="w3-bar-item w3-button w3-red tablink">home</a>
  <a href="#" id="myfeedssidelink" onclick="openTabs(event,'myfeeds')" class="w3-bar-item w3-button tablink">myfeeds</a>
  <a href="#" id="mygroupssidelink" onclick="openTabs(event,'mygroups')" class="w3-bar-item w3-button tablink">mygroups</a>
  <a href="#" id="mycardssidelink" onclick="openTabs(event,'mycards')" class="w3-bar-item w3-button tablink">mymembercards</a>
        </div>
      
      


    
    <!-- End Left Column -->
    </div>
    
    <!-- Middle Column -->
    <div class="w3-col m7">
    
      <div id="tabbars"  class="w3-bar">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openTabs(event,'myfeeds')">我的动态</button>
    <button class="w3-bar-item w3-button tablink" onclick="openTabs(event,'mygroups')">我的店铺</button>
    <button class="w3-bar-item w3-button tablink" onclick="openTabs(event,'mycards')">我的会员卡</button>
      </div>
      
      <div id="myfeeds" class="w3-container w3-border tab">
      <div class="w3-container w3-card w3-white w3-round w3-margin"><br>
        <img src="/w3images/avatar2.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
        <span class="w3-right w3-opacity">1 min</span>
        <h4>John Doe</h4><br>
        <hr class="w3-clear">
        <p>申请加入会员，是否同意？</p>

        <button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i> &nbsp;Like</button> 
        <button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i> &nbsp;Comment</button> 
      </div>
      </div>

      <div id="mygroups" class="w3-container w3-border tab" style="display:none">
         <div class="w3-container w3-card w3-round w3-margin">

        <header class="w3-container w3-light-grey">
          <h3>Group 1</h3>
        </header>

        <div class="w3-container">
          <p>新会员请求:</p>
          <hr>
          <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
          <p>President/CEO at Mighty Schools...</p>
        </div>

        <button class="w3-button w3-block w3-dark-grey">Manage</button>

        </div> 
      </div>

      <div id="mycards" class="w3-container w3-border tab" style="display:none">
         <div class="w3-container w3-card w3-round w3-margin">

        <header class="w3-container w3-light-grey">
          <h3>Group 1</h3>
        </header>

        <div class="w3-container">
          <p>通知: </p>
          <hr>
          <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
          <p>President/CEO at Mighty Schools...</p>
        </div>

        <button class="w3-button w3-block w3-dark-grey">查看</button>

        </div> 
      </div>

      
      
    <!-- End Middle Column -->
    </div>
    
    <!-- Right Column -->
    <div class="w3-col m2">
      <div class="w3-card w3-round w3-white w3-center">
        <div class="w3-container">
          <p>Upcoming Events:</p>
          <img src="/w3images/forest.jpg" alt="Forest" style="width:100%;">
          <p><strong>Holiday</strong></p>
          <p>Friday 15:00</p>
          <p><button class="w3-button w3-block w3-theme-l4">Info</button></p>
        </div>
      </div>
      <br>
      
      <div class="w3-card w3-round w3-white w3-center">
        <div class="w3-container">
          <p>Friend Request</p>
          <img src="/w3images/avatar6.png" alt="Avatar" style="width:50%"><br>
          <span>Jane Doe</span>
          <div class="w3-row w3-opacity">
            <div class="w3-half">
              <button class="w3-button w3-block w3-green w3-section" title="Accept"><i class="fa fa-check"></i></button>
            </div>
            <div class="w3-half">
              <button class="w3-button w3-block w3-red w3-section" title="Decline"><i class="fa fa-remove"></i></button>
            </div>
          </div>
        </div>
      </div>
      <br>
      
      <div class="w3-card w3-round w3-white w3-padding-16 w3-center">
        <p>ADS</p>
      </div>
      <br>
      
      <div class="w3-card w3-round w3-white w3-padding-32 w3-center">
        <p><i class="fa fa-bug w3-xxlarge"></i></p>
      </div>
      
    <!-- End Right Column -->
    </div>
    
  <!-- End Grid -->
  </div>
  
<!-- End Page Container -->
</div>
<br>

<!-- Footer -->
<footer class="w3-container w3-theme-d3 w3-padding-16">
  <h5>Footer</h5>
</footer>


 
<script>
// Accordion
function myFunction(id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    x.previousElementSibling.className += " w3-theme-d1";
  } else { 
    x.className = x.className.replace("w3-show", "");
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace(" w3-theme-d1", "");
  }
}

// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
  var x = document.getElementById("navDemo");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else { 
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>

</body>
</html> 
